// 适配主流设备
@deviceList: 240px, 320px, 360px, 375px, 384px, 400px, 411px, 414px, 424px, 480px, 540px, 640px, 720px, 750px, 768px, 800px, 1024px, 1920px, 2048px;

// 设备的种类
@deviceLength: length(@deviceList);

// 预设基准值
@baseFontSize: 25px;

// 设计稿尺寸
@psdWidth: 375px;

// 混入
// less中的index是从1开始的，比起索引，应该叫做序号
.adapterMixin(@index: 1) when (@index <=@deviceLength) {
  @media (min-width: extract(@deviceList, @index)) {
    html {
      font-size: @baseFontSize / @psdWidth * extract(@deviceList, @index);
    }
  }

  .adapterMixin(@index + 1);
}

/* 颜色变量 */

/* 行为相关颜色 */
@color-primary: #B38351;
@color-success: #4cd964;
@color-warning: #f0ad4e;
@color-error: #dd524d;

/* 文字基本颜色 */
@text-color:#333;//基本色
@text-color-inverse:#fff;//反色
@text-color-grey:#999;//辅助灰色，如加载更多的提示信息
@text-color-placeholder: #808080;
@text-color-disable:#c0c0c0;

/* 背景颜色 */
@bg-color:#ffffff;
@bg-color-grey:#F7F6FA;
@bg-color-hover:#f1f1f1;//点击状态颜色
@bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
@border-color:#c8c7cc;

/* 透明度 */
@opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
@color-title: #2C405A; // 文章标题颜色
@font-size-title:40rpx;
@color-subtitle: #555555; // 二级标题颜色
@font-size-subtitle:36rpx;
@color-paragraph: #3F536E; // 文章段落颜色
@font-size-paragraph:30rpx;

// 字体颜色
@font-color-theme1: blue;

// 背景颜色
@background-color-theme1: yellow;

.font_color(@color) {
  color: @color;

  [data-theme='blue'] & {
    color: @font-color-theme1;
  }
}

.bg_color(@color) {
  background-color: @color;

  [data-theme='blue'] & {
    background-color: @background-color-theme1;
  }
}

.size(@w, @h) {
  width: @w;
  height: @h;
}

.fj(@jc) {
  display: flex;
  justify-content: @jc;
}

.fa(@ai) {
  display: flex;
  align-items: @ai;
}

.flex(@jc, @ai) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
}

.ios_footer {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}